<template>
  <div class="page-box">
    <div class="map-box">
      <ChinaMap
        :mapData="echartsData"
      ></ChinaMap>
    </div>

  </div>
</template>

<script>
  import MapBox from "./MapBox.vue"
  import ChinaMap from "./chinaMap.vue"

  export default {
    components: {
      MapBox,
      ChinaMap,
    },
    data() {
      return {
        tableData: [],
        total: 0,
        pageNum: 1,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100],
        multipleSelection: [],
        echartsData: [],
      }
    },
    created() {
      // 获取图表数据中的字段， prams 中可以使用的字段
      this.echartsData = this.testData.map(({name, value}) => {
        return {
          name: this.getCityName(name),
          value
        }
      })
    },
    methods: {
      // 分页
      handleSizeChange (val) {
        this.pageSize = val
        this.query()
      },
      // 当前页
      handleCurrentChange (val) {
        this.pageNum = val
        this.query()
      },
      query() {
        const formParams = this.$refs.QueryForm.getParams()
        const params = { ...formParams, pageNum: this.pageNum, pageSize: this.pageSize }
        
      },
      importData() {
        this.$refs.ImportModal.handleOpen()
      },
      exportTemplate() {
        this.$exportFunc({
          url: '', // 下载地址
          params: params, // 参数
          fileName: item.fileName  // 文件名
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
        // console.log(111, this.multipleSelection)
      },
      editItem() {
        if( this.multipleSelection < 1 || this.multipleSelection > 1 ) {
          this.$message.warning("请选择其中一项进行修改！")
        }
      },
      deleteItem() {
        if( this.multipleSelection < 1 ) {
          this.$message.warning("请选择其中一项进行修改！")
          return
        }
        const params = this.multipleSelection.map(item => item.id)
        this.$confirm('确定要删除该条数据吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message.success('删除成功！');
        })
      },
      getCityName (cityName) {
        if (!cityName) return
        let isAutonomy = cityName.search('自治区') != -1
        if (isAutonomy) {
          return cityName.search('内') != -1
            ? cityName.substr(0, 3)
            : cityName.substr(0, 2)
        } else {
          return cityName.match(/(\S*)(省|市|特别行政区)/)
            ? cityName.match(/(\S*)(省|市|特别行政区)/)[1]
            : cityName
        }
      },

    }
  }

</script>

<style lang="scss" scoped>
  .page-box {
    padding: 20px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  .map-box {
    // border: 1px solid black;
    height: 80%;
    width: 100%;
    border: 1px solid black;
  }

  /* 分页 */
  .pagination-box {
    margin-top: 20px;
    float: right;
  }
  :deep .pagination-box .el-select--mini .el-input--mini .el-input__inner {
    height: 22px;
    line-height: 22px;
  }

  :deep .pagination-box .el-select--mini .el-input--mini .el-input__icon {
    line-height: 22px;
  }
</style>